<template>
  <div class="fillcontain" v-loading="dataListLoading">
    <bt-col-header title="规则条件"></bt-col-header>
    <div class="page-content">
      <el-form :model="dataForm" @keyup.enter.native="getDataList()" class="" label-width="80px">
          <el-form-item label="规则条件代码" class="col-md-4">
            <el-input v-model="dataForm.divisorIdentify" placeholder="规则条件代码" clearable></el-input>
          </el-form-item>
          <el-form-item label="规则条件名称" class="col-md-4">
            <el-input v-model="dataForm.divisorName" placeholder="规则条件名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="规则条件类型" class="col-md-4">
            <el-select v-model="dataForm.divisorType" filterable clearable placeholder="请选择">
              <el-option
                v-for="item in divisorTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <div class="row contain-padding">
            <div class="col-md-12 text-center mt-2">
                <rich-button :plain="true" type="info" shape="capsule" icon='search' @click="getDataList()">查询</rich-button>
            <rich-button shape="capsule" icon='quit' @click="resetData">重置</rich-button>
            </div>
          </div>
        </el-form>

        <div class="">
          <!-- 操作按钮 -->
          <div class="btn-padding left">
            <el-button :plain="true" type="info" icon="circle-plus" @click="addOrUpdateHandle()">新增</el-button>
          </div>          

          <!-- 查询结果列表 -->
          <div class="table_container">
            <!-- 列表 -->
            <el-table
              :data="dataList"
              border
              style="width: 100%; ">
              <el-table-column
                type="index"
                header-align="center"
                width="50"
                label="序号">
              </el-table-column>
              <el-table-column
                prop="divisorIdentify"
                header-align="center"
                align="center"
                label="规则条件代码">
              </el-table-column>
              <el-table-column
                prop="divisorName"
                header-align="center"
                align="center"
                label="规则条件名称">
              </el-table-column>
              <el-table-column
                prop="divisorType"
                header-align="center"
                align="center"
                label="因子类型">
                <template slot-scope="scope">
                  {{scope.row.divisorType | divisorTypesFilter}}
                </template>
              </el-table-column>
              <el-table-column
                prop="configUser"
                header-align="center"
                align="center"
                label="配置人">
              </el-table-column>
              <el-table-column
                prop="configDate"
                header-align="center"
                align="center"
                label="配置时间">
              </el-table-column>
              <el-table-column
                prop="isEffect"
                header-align="center"
                align="center"
                label="状态">
                <template slot-scope="scope">
                  {{scope.row.isEffect | isEffectFilter}}
                </template>
              </el-table-column>

              <el-table-column
                header-align="center"
                align="center"
                label="操作">
                <template slot-scope="scope">
                  <el-button v-if="isAuth('entity:view')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>
                  <el-button v-if="isAuth('entity:view') && scope.row.isEffect==='1'" type="text" size="small" @click="edit(scope.row)">禁用</el-button>
                  <el-button v-if="isAuth('entity:view') && scope.row.isEffect==='0'" type="text" size="small" @click="edit(scope.row)">启用</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
              class="float-right mt-2"
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
              :current-page="page.pageIndex"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="page.pageSize"
              :total="page.totalPage"
              layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
            
          </div>
        </div>
    </div>
  </div>
</template>

<script>
    import {pageData,updateData} from '@/api/baseConfig/conditionDivisor'
    import constant from "../../../../../api/constant";

    export default {
        data() {
            return {
                divisorTypes: constant.ruleConfig.divisorTypes,
                dataForm: {
                    divisorIdentify: '',
                    divisorType: '',
                    divisorName:''
                },
                dataList: [],
                dataListLoading: false,
                addOrUpdateVisible: false,
                page: {
                    pageIndex: 1,
                    pageSize: 10,
                    totalPage: 0
                }
            }
        },
        components: {
        },
        activated() {
            this.getDataList()
        },
        methods: {
            edit(row){
                let data = row
                if(row.isEffect==='0'){
                    data.isEffect = '1'
                }else{
                    data.isEffect = '0'
                }
                this.$store.dispatch('loading/CHANGE_LOADING', true)
                updateData(JSON.stringify(data)).then(res=>{
                    this.$store.dispatch('loading/CHANGE_LOADING', false)
                    this.getDataList()
                }).catch(err=>{
                    this.$store.dispatch('loading/CHANGE_LOADING', false)
                })
            },
            resetData() {
              this.dataForm.divisorType = ''
                this.dataForm.divisorIdentify = ''
                this.dataForm.divisorName = ''
            },
            // 每页数
            sizeChangeHandle(val) {
                this.page.pageSize = val
                this.page.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.page.pageIndex = val
                this.getDataList()
            },
            // 获取数据列表
            getDataList() {
                this.$store.dispatch('loading/CHANGE_LOADING', true)
                let params = {
                    pageNumber: this.page.pageIndex,
                    pageSize: this.page.pageSize,
                    divisorType: this.dataForm.divisorType,
                    divisorIdentify: this.dataForm.divisorIdentify,
                    divisorName:this.dataForm.divisorName
                }
                pageData(params).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false)
                    this.dataList = res.data.data.list
                    this.page.totalPage = res.data.data.totalCount
                }).catch(err=>{
                    this.$store.dispatch('loading/CHANGE_LOADING', false)
                })
            },
            // 新增 / 修改
            addOrUpdateHandle(id) {
                constant.clearTag(this)
                if(id){
                    this.$router.push({path: "/drools-baseConfig/conditionDivisor/add-or-update/"+id})
                }else{
                    this.$router.push({path: "/drools-baseConfig/conditionDivisor/add-or-update"})
                }

            },

        },
        filters:{
            divisorTypesFilter:function(value){
                let label = ''
                if(value==='1'){
                    label = '方法'
                }else if(value==='0'){
                    label = "非方法"
                }else if(value==='3'){
                  label = "自定义"
                }
                return label
            },
            isEffectFilter:function(value){
                let label = ''
                if(value==='0'){
                    label = '失效'
                }else if(value==='1'){
                    label = "有效"
                }
                return label
            }
        }

    }
</script>
<style>
  body .el-table th.gutter {
    display: table-cell !important
  }
</style>
